<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LightRAG</title>
    <style>
        :root {
            --primary: #4F46E5;
            --secondary: #10B981;
            --background: #F8FAFC;
            --surface: #FFFFFF;
            --text-primary: #1E293B;
            --text-secondary: #64748B;
            --border: #E2E8F0;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/lightrag.css">
    <link rel="stylesheet" type="text/css" href="css/graph.css">
</head>
<body>
<div class="app-container">
    <nav class="nav-panel">
        <h2 class="nav-title">LightRAG</h2>
        <div class="nav-menu">
            <button class="btn btn-primary" style="width: 100%; margin-bottom: 1rem;"
                    onclick="showSection('documents')">
                📁 DOC MANAGE
            </button>
            <button class="btn btn-primary" style="width: 100%; margin-bottom: 1rem;"
                    onclick="showSection('text-upload')">
                📝 TEXT UPLOAD
            </button>

            <button class="btn btn-primary" style="width: 100%; margin-bottom: 1rem;" onclick="showSection('query')">
                🔍 GRAPH SEARCH
            </button>
            <button class="btn btn-primary" style="width: 100%; margin-bottom: 1rem;"
                    onclick="showSection('label-management'); loadLabels()">
                🏷️ GRAPH MANAGE
            </button>
            <button class="btn btn-secondary" style="width: 100%;" onclick="showSection('status')">
                📊 SYSTEM STATUS
            </button>

        </div>
    </nav>

    <main class="main-content">
        <section id="documents" class="card">
            <h3 class="card-title">DOC MANAGE</h3>
            <div class="file-dropzone" id="dropzone">
                <input type="file" id="fileInput" hidden multiple>
                <p>Drap file</p>
                <button class="btn btn-primary" onclick="document.getElementById('fileInput').click()">
                    📤 select file
                </button>
                <div class="file-list" style="margin-top: 1rem;"></div>
                <div class="status-indicator" id="fileUploadStatus"></div>
            </div>
        </section>

        <section id="text-upload" class="card" style="display: none;">
            <h3 class="card-title">TEXT UPLOAD</h3>
            <div class="text-upload-form">
                <div class="form-group">
                    <label for="textDescription">Title（optional）</label>
                    <input
                            type="text"
                            id="textDescription"
                            class="input-field"
                            placeholder="Please enter a text title..."
                    >
                </div>
                <div class="form-group">
                    <label for="textContent">TEXT CONTENT</label>
                    <textarea
                            id="textContent"
                            class="input-field"
                            placeholder="lease enter a text content..."
                            rows="8"
                            required
                    ></textarea>
                </div>
                <div class="action-bar">
                    <button class="btn btn-primary" onclick="handleTextUpload()">
                        📤 submit
                    </button>
                    <div class="status-indicator" id="textUploadStatus"></div>
                </div>
            </div>
        </section>

        <section id="label-management" class="card" style="display: none;">
            <h3 class="card-title">GRAPH MANAGE(neo4j)</h3>
            <div class="action-bar" style="margin-bottom: 1rem;">
                <button class="btn btn-secondary" onclick="refreshLabels()">
                    🔄 refresh
                </button>
            </div>
            <div id="label-list" class="label-container">
            </div>
        </section>

        <!-- search -->
        <section id="query" class="card" style="display: none;">
            <h3 class="card-title">SEARCH API</h3>
            <select class="input-field" style="margin-bottom: 1rem;">
                <option value="local">local search</option>
                <option value="global">global search</option>
                <option value="native">native search</option>
                <option value="hybrid">hybrid search</option>
                <option value="mix">mix search</option>
            </select>
            <textarea
                    class="input-field"
                    placeholder="enter your content..."
                    style="height: 120px; resize: vertical;"
            ></textarea>
            <div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
                <button class="btn btn-primary">🔍 searching</button>
                <label class="btn btn-secondary">
                    <input type="checkbox" style="margin-right: 0.5rem;">stream modal
                </label>
            </div>
            <div class="results"
                 style="margin-top: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 8px;"></div>
        </section>


        <section id="status" class="card" style="display: none;">
            <h3 class="card-title">System Status</h3>
            <div class="status-grid">
                <div class="status-card health-status">
                    <div class="status-header">
                        <i class="status-icon fas fa-heartbeat"></i>
                        <h4>HEATH STATUS</h4>
                    </div>
                    <div class="status-badge" id="healthStatus">checking...</div>
                </div>

                <!-- 存储状态 -->
                <div class="status-card storage-status">
                    <div class="status-header">
                        <i class="status-icon fas fa-database"></i>
                        <h4>Storage status</h4>
                    </div>
                    <div class="progress-container">
                        <progress value="0" max="100" id="storageProgress"></progress>
                        <div class="progress-labels">
                            <span id="indexedFiles">Indexed files：0</span>
                            <span id="storageUsage">Use ratio：0%</span>
                        </div>
                    </div>
                </div>

                <div class="status-card model-config">
                    <div class="status-header">
                        <i class="status-icon fas fa-brain"></i>
                        <h4>LLM configuration</h4>
                    </div>
                    <dl class="config-list">
                        <dt>LLM MODEL</dt>
                        <dd id="llmModel">Loading...</dd>

                        <dt>Embedded model</dt>
                        <dd id="embedModel">Loading...</dd>

                        <dt>Max token</dt>
                        <dd id="maxTokens">0</dd>
                    </dl>
                </div>

                <div class="status-card directory-info">
                    <div class="status-header">
                        <i class="status-icon fas fa-folder-open"></i>
                        <h4>Catalog information</h4>
                    </div>
                    <div class="directory-list">
                        <div class="directory-item">
                            <span class="directory-label">Work directory：</span>
                            <span class="directory-path" id="workingDir"></span>
                        </div>
                        <div class="directory-item">
                            <span class="directory-label">Input directory：</span>
                            <span class="directory-path" id="inputDir"></span>
                        </div>
                    </div>
                </div>

                <div class="status-card directory-info">
                    <div class="status-header">
                        <i class="status-icon fas fa-folder-open"></i>
                        <h4>Store information</h4>
                    </div>
                    <div class="directory-list">
                        <div class="directory-item">
                            <span class="directory-label">kv_storage：</span>
                            <span class="directory-path" id="kv_storage"></span>
                        </div>
                        <div class="directory-item">
                            <span class="directory-label">doc_status_storage：</span>
                            <span class="directory-path" id="doc_status_storage"></span>
                        </div>
                        <div class="directory-item">
                            <span class="directory-label">graph_storage：</span>
                            <span class="directory-path" id="graph_storage"></span>
                        </div>
                        <div class="directory-item">
                            <span class="directory-label">vector_storage：</span>
                            <span class="directory-path" id="vector_storage"></span>
                        </div>
                    </div>
                </div>

            </div>
        </section>
    </main>
</div>
<div id="graph-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="graph-title">GRAPH MANAGE</h3>
            <button class="btn btn-close" onclick="closeGraphModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div id="graph-container">
                <svg id="graph-svg" width="100%" height="600px">
                </svg>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeGraphModal()">SHUT DOWN</button>
        </div>
        <div class="resize-handle"></div>

    </div>
</div>
<script>
    const dropzone = document.getElementById('dropzone');

    dropzone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropzone.classList.add('active');
    });

    dropzone.addEventListener('dragleave', () => {
        dropzone.classList.remove('active');
    });

    dropzone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropzone.classList.remove('active');
        const files = e.dataTransfer.files;
        handleFiles(files);
    });

    function handleFiles(files) {
        console.log('selected file:', files);
    }

    function showSection(sectionId) {
        // Hide all content blocks
        const sections = document.querySelectorAll('.main-content .card');
        sections.forEach(section => {
            section.style.display = 'none';
        });

        //  Display target block
        const targetSection = document.getElementById(sectionId);
        if (targetSection) {
            targetSection.style.display = 'block';
        }

        // Update button activation status (optional)
        const buttons = document.querySelectorAll('.nav-menu button');
        buttons.forEach(button => {
            button.classList.remove('active');
        });
        event.target.classList.add('active');
    }

    // Initialize the display document management module
    showSection('documents');
</script>
<script src="js/lightrag.js"></script>
<script src="js/graph.js"></script>
<script src="https://d3js.org/d3.v7.min.js"></script>
</body>
</html>
